<template>
  <SettingItem title="布局设置">
    <a-list :split="false">
      <!-- 内容区域宽度 -->
      <a-list-item>
        <template #actions>
          <a-select
            size="small"
            style="width: 80px"
            :value="store.userStore.contentWidth"
            @change="handleContentWidthChange"
          >
            <a-select-option value="Fluid">流式</a-select-option>
            <a-select-option value="Fixed">固定</a-select-option>
          </a-select>
        </template>
        <a-list-item-meta>
          <template #title>内容区域宽度</template>
        </a-list-item-meta>
      </a-list-item>
      <!-- 固定 Header -->
      <a-list-item>
        <template #actions>
          <a-switch
            size="small"
            :checked="store.userStore.fixedHeader"
            @change="handleFixedHeader"
            :disabled="store.userStore.contentWidth === 'Fixed'"
          />
        </template>
        <a-list-item-meta>
          <template #title>
            <span
              :style="{
                opacity: store.userStore.contentWidth === 'Fixed' ? '0.5' : '1'
              }"
              >固定 Header
            </span>
          </template>
        </a-list-item-meta>
      </a-list-item>
      <!-- 下滑时隐藏 Header -->
      <!-- <a-list-item>
        <template #actions>
          <a-switch
            size="small"
            :disabled="store.userStore.layoutMode === 'sidemenu' || !store.userStore.fixedHeader"
            :checked="store.userStore.autoHideHeader"
            @change="handleFixedHeaderHidden"
          />
        </template>
        <a-list-item-meta>
          <template #title>
            <a-tooltip placement="left">
              <template #title>固定 Header 时可配置</template>
              <div
                :style="{
                  opacity:
                    store.userStore.layoutMode === 'sidemenu' || !store.userStore.fixedHeader
                      ? '0.5'
                      : '1'
                }"
              >
                下滑时隐藏 Header
              </div>
            </a-tooltip>
          </template>
        </a-list-item-meta>
      </a-list-item> -->
      <!-- 固定侧边菜单 -->
      <a-list-item>
        <template #actions>
          <a-switch
            size="small"
            :disabled="store.userStore.layoutMode === 'topmenu'"
            :checked="store.userStore.fixSiderbar"
            @change="handleFixSiderbar"
          />
        </template>
        <a-list-item-meta>
          <template #title>
            <div :style="{ opacity: store.userStore.layoutMode === 'topmenu' ? '0.5' : '1' }">
              固定侧边菜单
            </div>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </SettingItem>
</template>
<script lang="ts" setup name="LayoutSettings">
import store from '@/store'
// import { systemConfig } from '@/store/reactiveState'
// import {
//   TOGGLE_CONTENT_WIDTH,
//   TOGGLE_FIXED_HEADER,
//   TOGGLE_FIXED_HEADER_HIDDEN,
//   TOGGLE_FIXED_SIDERBAR
// } from '@/store/mutation-types'
// import useSiteSettings from '@/store/useSiteSettings'
// import { CheckOutlined } from '@ant-design/icons-vue'
// import SettingItem from './SettingItem.vue'

// const { contentWidth, layoutMode, fixedHeader, autoHideHeader, fixSiderbar } = useSiteSettings()

const handleContentWidthChange = (type) => {
  store.userStore.contentWidth = type
}

const handleFixedHeader = (fixed) => {
  store.userStore.fixedHeader = fixed
}

const handleFixedHeaderHidden = (autoHidden) => {
  store.userStore.autoHideHeader = autoHidden
}

const handleFixSiderbar = (fixed) => {
  store.userStore.fixSiderbar = fixed
}
</script>
<style lang="less"></style>
